<template>
    <div class="content-list">
        <!-- 拖拽实现宽度和高度的拖拽，点击按钮收起功能 https://blog.csdn.net/qq_32555123/article/details/128677532 -->
        <div class="content-header">
            <div class="content-header-title">
                笔记
            </div>

            <div class="content-header-action" @click="createNote">
                <el-tooltip class="box-item" effect="dark" content="新建笔记" placement="bottom">
                    <div class="super-editor-button-box">
                        <MessageSquarePlus />
                    </div>
                </el-tooltip>
            </div>
        </div>

        <!-- <div class="content-channel">
            <div>笔记</div>
            <div class="content-channel-spider">草稿箱</div>
            <div>已发布</div>
        </div> -->
        <div class="content-search">
            <el-input v-model="searchItem" placeholder="请输入要搜索的文章" clearable class="content-search-input"
                @focus="focusInput" @blur="blurInput"  @keyup.enter="search" />
        </div>
        <div class="infinite-list">
            <el-scrollbar ref="scrollbar" @scroll="loadNotes" style="height: 100% ">
                <div @click.exact="clickPost(item)" @click.right.prevent="noteAction" v-for="item in contentList" :key="item.id" :class="getItemClass(item)">
                    <div class="itme-title">{{ item.title.substring(0, 18) }}</div>
                    <div class="item-summary">{{ item.content.replace(/<[^<>]+>/g, '').substring(0, 30) }}</div>
                    <div class="item-created">{{ item.created }}</div>
                </div>
            </el-scrollbar>
        </div>
    </div>
</template>

<script setup>
import { ref} from 'vue'
// import moment from 'moment';
import { emitter } from '@/global.js'
import { createPost, searchPosts } from '@/api/post'
import { getPosts } from '@/api/post'
import { MessageSquarePlus } from 'lucide-vue-next';

// const loading = ref(false)


const emit = defineEmits(['update:clickItem', 'update:clickItemId'])
const props = defineProps({
    clickItem: {
        type: String,
        default: ''
    },
    clickItemId: {
        type: String,
        default: ''
    },
})


const contentList = ref([])
const currentPage = ref(1)

const loadPosts = (init=false) => {
    getPosts(currentPage.value).then((postList) => {
        contentList.value.push(...postList)
        // console.log(contentList.value);
        if(init){
            clickPost(contentList.value[0])
        }
    })
}
//初始化
loadPosts(true)

const refreshPosts = () => {
    currentPage.value = 1
    getPosts(currentPage.value).then((result) => {
        contentList.value = result
        clickPost(contentList.value[0])
    })
}

emitter.on('refreshList', () => {
    console.log('refreshList');
    refreshPosts()
})


const createNote = () => {
    const item = { title: 'new note', content: 'Hello' }
    createPost(item).then((post) => {
        console.log(post);
        contentList.value.unshift(post)
        activeItem.value = post.id
        scrollbar.value.wrapRef.scrollTop=0
        emitter.emit('createItem', post)
    })
}


// 高亮正在阅读的内容
const activeItem = ref('')
const getItemClass = (item) => {
    if (activeItem.value === item.id) {
        return 'infinite-list-item infinite-list-item-active'
    }
    return 'infinite-list-item'
}
const clickPost = (post) => {
    emitter.emit('clickItem', post)
    activeItem.value = post.id
}

const searchItem = ref('')
const searchResult = ref([])
const search = (keyWord) => {
    console.log('search', keyWord);
    searchPosts(searchItem.value).then((result) => {
        contentList.value = result
    })

}

const focusInput = () => {
    contentList.value = []
    // searchInput.value.focus()
    console.log(searchItem.value, 'focusInput');
}

const blurInput = () => {
    if(searchItem.value==''){
        refreshPosts()
    }
}
const scrollbar = ref(null)
const loadNotes = () => {
    // console.log((scrollbar.value.wrapRef.scrollHeight - scrollbar.value.wrapRef.scrollTop), 'scrollbar');
    // 判断滚到条距离底部，加载新数据
    if ((scrollbar.value.wrapRef.scrollHeight - scrollbar.value.wrapRef.scrollTop) == scrollbar.value.wrapRef.clientHeight) {
        // console.log('clientHeight: ', scrollbar.value.wrapRef.clientHeight);
        currentPage.value += 1
        loadPosts()
    }
}

const noteAction=()=>{
    // emitter.emit('noteAction')
    console.log('noteAction');
}

</script>

<style scoped>
/*  */

.content-list {
    height: 100vh;
    border-right: 1px solid #e6e6e6;
}

.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--supereditor-header-height);
    padding: 0 10px;
}

.content-header-title {
    width: 90%;
    font-size: large;
    font-weight: bold;
}

.content-header-add {
    display: inline-flex;
    align-items: center;
    line-height: 0px;
    text-align: center;
}

.content-header-action {
    height: 36px;
    width: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.content-header-action:hover {
    background: #ECEEF5;
    border-radius: 5px;
}

.content-search {
    padding: 10px;
    height: 60px;
    width: 100%;
}

.content-search-input {
    width: 100%;
}

.content-channel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    height: 30px;
}

.content-channel>:nth-child(n) {
    width: 100px;
    text-align: center;
}

.content-channel-spider {
    border-right: 1px solid #e6e6e6;
    border-left: 1px solid #e6e6e6;
}

.infinite-list {
    height: calc(100vh - var(--supereditor-header-height) - 60px);
    padding: 0;
    margin: 0;
    list-style: none;
    border-top: 0;
}

.infinite-list .infinite-list-item {
    align-items: center;
    justify-content: center;
    /* border-bottom: solid 1px #ECEEF5; */
    margin: 0 10px 5px 10px;
    padding: 0 10px;
    border-radius: 4px;
    cursor: pointer;
}

.infinite-list-item:hover {
    background-color: var(--supereditor-hover-bg-color);
}

.infinite-list-item-active {
    background-color: #B3D7FF;
}

.itme-title {
    color: #333333;
    font-size: 16px;
    font-weight: 500;
    padding-top: 10px;
}

.item-summary {
    font-size: 14px;
    color: #4D4D4D;
    padding: 10px 0px;
    word-break: break-all;
}

.item-created {
    font-size: 12px;
    padding-bottom: 10px;
    color: #737373;
}
</style>